<html>  
  <head>  
        <meta charset="utf-8">  
        <title>7.1.4.1 过渡的each</title>  
  </head> 
  <style>
  </style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width  = 500;	//SVG绘制区域的宽度
var height = 500;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性
			
var dataset = [100, 100, 100];		

var g = svg.append("g");

var rect = g.selectAll("rect")
				.data(dataset)
				.enter()
				.append("rect")
				.attr("fill","steelblue")
				.attr("id",function(d,i){ return "rect" + i; })
				.attr("x",10)
				.attr("y",function(d,i){ return 10 + i * 35; })
				.attr("width",function(d,i){ return d; })
				.attr("height",30);
			
g.transition()
	.duration(2000)
	.selectAll("rect")
	.each("start",function(d,i){
		console.log("start");
	})
	.each("interrupt",function(d,i){
		console.log("interrupt");
	})
	.each("end",function(d,i){
		console.log("end");
	})
	.attr("width",300);
					
setTimeout(function(){
	g.transition()
		.selectAll("rect")
		.attr("width",10);
},1000);

</script> 

</body>
</html>